<template>
   <div id="personinfo-container">
      <!-- 右键菜单 -->
      <ul id="menu" class="menu" v-show="menuVisible" >
         <li class="menu-item" @click="addSameLevel"><i class="el-icon-plus" style="color: #409eff"></i> 平级添加</li>
         <li class="menu-item" @click="addSubordinate"><i class="el-icon-caret-bottom" style="color: #409eff"></i> 下级添加</li>
         <li class="menu-item" @click="deleteLevel" style="border-top: 1px solid #ddd;"><i class="el-icon-delete-solid" style="color: #e93c43"></i> 删除</li>
      </ul>
      <!-- 左侧树 -->
      <g-banner title="左树右表单" des="左边为树图，右边为表单的页面"></g-banner>
      <!-- 编辑按钮 -->
      <a-affix :target="getScrollingCon">
         <div class="g-title-con">
            <h2 class="g-main-title pull-left">左树右表单</h2>
            <div class="g-title-button pull-right">
               <el-button type="primary" @click="edit">{{editButton}}</el-button>
               <el-button @click="cancelEdit" v-if="!readOnly">取消</el-button>
            </div>
            <div clearfix></div>
         </div>
      </a-affix>
      <div class="clearfix"></div>
      <div class="personinfo-container">
         <div class="department-container g-box">
            <div class="demo-input-suffix">
               <el-input id="search" placeholder="组织名称" suffix-icon="el-icon-search" v-model="search" @input="filterChange"></el-input>
               <el-tree :data="department" :default-expanded-keys="[1]" node-key="id"
               @node-click="menuVisible = false" @node-contextmenu="showRightMenu" 
               @node-expand="menuVisible = false" @node-collapse="menuVisible = false"
               :filter-node-method="filterNode" ref="depTree"></el-tree>
            </div>
         </div>
         <div class="info-container g-box">
            <!-- 返回顶部 -->
            <el-backtop target=".info-container"></el-backtop>
            <!-- 标签切换 -->
            <el-tabs type="border-card" v-model="activeName" :class="{'tagplus': !_tagplus}" class="fixed">
               <!-- 标签里的内容 -->
               <el-tab-pane label="基本信息" name="basicInfo">
                  <table class="basic-info">
                     <tr class="title">
                        <td width="150px">
                           基本信息
                        </td>
                        <td width="250px"></td>
                        <td width="150px"></td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">类型</span></td>
                        <td>
                           <!-- 根据readOnly变量进行样式和显示的控制 -->
                           <el-input class="small text" :class="{'read-only': readOnly}" v-model="basicInfo.basicInfo.type" v-bind:readonly="readOnly"></el-input>
                        </td>
                        <td class="right"><span class="item">组织代码</span></td>
                        <td :class="{'read-only': readOnly}">
                           <el-input class="small text" v-model="basicInfo.basicInfo.departmentId" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="basicInfo.basicInfo.name" v-bind:readonly="readOnly"></el-input>
                        </td>
                        <td class="right"><span class="item">负责岗/负责人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="basicInfo.basicInfo.principal" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">组织结构类型</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="basicInfo.basicInfo.organizationStructureType" v-bind:readonly="readOnly"></el-input>
                        </td>
                        <td class="right"><span class="item">所属部门</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="basicInfo.basicInfo.departmentName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">所属单位</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="basicInfo.basicInfo.unitName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           系统账号
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">系统账号</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="basicInfo.systemAccount.systemAccount" v-bind:readonly="readOnly"></el-input>
                        </td>
                        <td class="right"><span class="item">用户状态</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-switch v-model="basicInfo.systemAccount.userState" 
                        active-text="打开" inactive-text="锁定"
                        :disabled="readOnly"></el-switch>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">是否系统管理员</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-switch v-model="basicInfo.systemAccount.admin" active-text="是" inactive-text="否" :disabled="readOnly"></el-switch>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           用户策略
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">最大会话数</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="number" class="small text" v-model="basicInfo.userStrategy.maxSession" v-bind:readonly="readOnly"></el-input>
                        </td>
                        <td class="right"><span class="item">启用IP策略</span></td>
                        <td :class="{'read-only': readOnly}">
                        <!-- <el-input class="small text" v-model="basicInfo.userStrategy.ipStrategy" v-bind:readonly="readOnly"></el-input> -->
                        <el-switch v-model="basicInfo.userStrategy.ipStrategy" active-text="是" inactive-text="否" :disabled="readOnly"></el-switch>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           组织结构权限
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td colspan="4" style="padding: 0 20px;width: 100%">
                           <el-table 
                           :data="basicInfo.organizationPermission"
                           stripe>
                           <el-table-column 
                           prop="organizationId"
                           label="序号"
                           ></el-table-column>
                           <el-table-column 
                           prop="organizationType"
                           label="组织类型"
                           ></el-table-column>
                           <el-table-column 
                           prop="organizationId"
                           label="组织机构"
                           ></el-table-column>
                           <el-table-column 
                           prop="default"
                           label="是否默认值"
                           ></el-table-column>
                           <el-table-column 
                           prop="activeTime"
                           label="生效时间"
                           ></el-table-column>
                           <el-table-column 
                           prop="expiredTime"
                           label="过期时间"
                           ></el-table-column>
                           </el-table>
                        </td>
                     </tr>
                  </table>
               </el-tab-pane>
               <el-tab-pane label="角色信息">
                  <el-table :data="personInfo" stripe v-if="readOnly">
                     <el-table-column prop="index" label="序号" width="100px"></el-table-column>
                     <el-table-column prop="personName" label="角色名称"></el-table-column>
                  </el-table>
                  <!-- 穿梭框，根据readOnly进行切换 -->
                  <el-transfer class="role-transfer" v-model="value" :data="role" :titles="['可选角色名称', '已有角色名称']" v-else></el-transfer>
               </el-tab-pane>
               <el-tab-pane label="员工信息">
                  <table class="basic-info">
                     <tr class="title">
                        <td>
                           员工信息
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">员工名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.employeeInfo.employeeName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">员工状态</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.employeeInfo.employeeState" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">工号</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.employeeInfo.employeeId" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           基本信息
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">性别</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-radio v-model="employeeInfo.basicInfo.employeeSex" :disabled="readOnly" label="男">男</el-radio>
                        <el-radio v-model="employeeInfo.basicInfo.employeeSex" :disabled="readOnly" label="女">女</el-radio>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">职务</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.basicInfo.employeePostion" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">出生日期</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-date-picker
                           :disabled="readOnly" 
                           v-model="employeeInfo.basicInfo.employeeBirthday"
                           type="date"
                           placeholder="选择日期">
                        </el-date-picker>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">身份证号码</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.basicInfo.employeeIdentity" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">婚姻状况</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-select v-model="employeeInfo.basicInfo.marriage" placeholder="请选择" :disabled="readOnly">
                           <el-option
                              v-for="item in marriage"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                           </el-option>
                        </el-select>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">政治面貌</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.basicInfo.politicalStatus" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">入团日期</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-date-picker
                           :disabled="readOnly" 
                           v-model="employeeInfo.basicInfo.CYLDate"
                           type="date"
                           placeholder="选择日期">
                        </el-date-picker>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">入党日期</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-date-picker
                           :disabled="readOnly" 
                           v-model="employeeInfo.basicInfo.CPCDate"
                           type="date"
                           placeholder="选择日期">
                        </el-date-picker>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">是否工会成员</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-switch v-model="employeeInfo.basicInfo.isUnionMember" active-text="是" inactive-text="否" :disabled="readOnly"></el-switch>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">学历</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.basicInfo.education" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">学位</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.basicInfo.bachelorOfScience" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">健康状况</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.basicInfo.healthState" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">身高(cm)</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="number" class="small text" v-model="employeeInfo.basicInfo.height" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">体重(kg)</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="number" class="small text" v-model="employeeInfo.basicInfo.weight" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           员工专长
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">专业技术技能</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.employeeSpecialty.techSkill" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">员工专长</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.employeeSpecialty.employeeSkill" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">业务专长</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.employeeSpecialty.businessSkill" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           家庭住址
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">邮政编码</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="number" class="small text" v-model="employeeInfo.home.postalCode" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">家庭住址</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="textarea" class="small text" v-model="employeeInfo.home.address" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">现居住地</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.home.currentAddress" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">户口所在地名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="employeeInfo.home.accountLocationName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">户口所在地编码</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="number" class="small text" v-model="employeeInfo.home.accountLocationPostalCode" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">备注</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="textarea" class="small text" v-model="employeeInfo.home.remark" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                  </table>
               </el-tab-pane>
               <el-tab-pane label="通讯信息">
                  <table class="basic-info">
                     <tr class="title">
                        <td>
                           通讯信息
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">移动电话</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="number" class="small text" v-model="communication.communication.mobile" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">固定电话</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.telephone" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">传真</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.fax" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">电子邮箱</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input type="email" class="small text" v-model="communication.communication.email" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">邮政编码</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.postalCode" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">办公室地址</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.officeAddress" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">RTX</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.RTX" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">MSN</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.MSN" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">QQ</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.QQ" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">微博</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.weibo" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">博客</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.blog" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">网站</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.website" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">其他联系方式</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.otherCom" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td width="150px" class="right"><span class="item">备注</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="communication.communication.remark" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                  </table>
               </el-tab-pane>
               <el-tab-pane label="人员扩展信息">
                  <table class="basic-info">
                     <tr class="title">
                        <td >
                           信用管理
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">人员所属组织机构</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.creditManagement.organization" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           信用管理2
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">人员所属行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.creditManagement2.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           安监
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管区域</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.safetySupervision.supervisingArea" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.safetySupervision.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">测试文件</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.safetySupervision.testFile" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">执法监管监管区域</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.safetySupervision.lawEnforcementSupervision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           投诉举报
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">投诉举报查询权限</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.complaints.complaintsQuery" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           数据中心
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">企业类型</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dataCenter.enterpriseType" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">操作权限</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dataCenter.operationPermission" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">查询区域</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dataCenter.queryArea" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           日常监管
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管范围</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.supervisingRange" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">是否执法人员</span></td>
                        <td :class="{'read-only': readOnly}">
                        <!-- <el-input class="small text" v-model="extendedInformation.dailySupervision.isLawEnforcement" v-bind:readonly="readOnly"></el-input> -->
                        <el-switch v-model="extendedInformation.dailySupervision.isLawEnforcement" active-text="是" inactive-text="否" :disabled="readOnly"></el-switch>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">检查表模板权限</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.checkingTableTemplatePermission" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管执法证号</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.regulatoryEnforcementNumber" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">民族</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.nationality" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">文化程度</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.educationalLevel" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">职务</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.position" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">调入日期</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.joinDate" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">认领角色</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.dailySupervision.claimCharacter" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           核心信息
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">基本情况</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.caseHandling.basicSituation" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">个人签名</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.caseHandling.signature" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">执法区域</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.caseHandling.lawEnforcementArea" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">执法类别</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.caseHandling.lawEnforcementType" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理扩展
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理扩展
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           登记许可
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">下一环节办理人_销售</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.caseHandlingExpansion.nextLinkHandlerSell" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">下一环节办理人_食堂</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.caseHandlingExpansion.nextLinkHandlerCanteen" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">下一环节办理人_餐饮</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.caseHandlingExpansion.nextLinkHandlerFood" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           组织机构属性扩展
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">微信</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.organizationProExpansion.weixin" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">签章名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.organizationProExpansion.signatureName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.organizationProExpansion.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">证书名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.organizationProExpansion.certificateName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           食品抽检
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.foodSampling.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管范围</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.foodSampling.supervisingRange" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           食品抽检
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation.foodSampling2.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管范围</span></td>
                        <td :class="{'read-only': readOnly}">
                           <el-button class="person-right" @click="$message('假装查看了权限')">查看本人权限</el-button>
                        </td>
                     </tr>
                  </table>
               </el-tab-pane>
               <el-tab-pane label="部门扩展信息">
                  <table class="basic-info">
                     <tr class="title">
                        <td>
                           安监
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">组织机构选择</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.organizationSelect" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">监管区域</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.supervisingArea" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">上级机构名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.superiorMechanismName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">人民政府名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.peopleGovernmentName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">人民法院</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.peopleCourt" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">人民法院1</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.peopleCourt1" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">本机构所使用的银行账号信息</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.bankAccount" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">本级机构所使用的银行</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.bank" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">办案机构代码</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.caseHandlingAgencyCode" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">处罚文号</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.punishmentDocumentNumber" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">行政区域代码</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.safetySupervision.administrativeAreaCode" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           投诉举报
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">下级单位/部门</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.complaints.subordinateDepartment" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">投诉举报监督区域</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.complaints.complaintsSupervisingArea" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">投诉举报编号格式</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.complaints.complaintsNumberingFormat" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right" width="200px"><span class="item">投诉举报查询权限</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.complaints.complaintsQuery" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           日常监管
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管范围</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.supervisingRange" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">是否执法人员</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-switch v-model="extendedInformation2.dailySupervision.isLawEnforcement" active-text="是" inactive-text="否" :disabled="readOnly"></el-switch>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">检查表模板权限</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.checkingTableTemplatePermission" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管执法证号</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.regulatoryEnforcementNumber" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行业</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.industry" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">地理信息</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.geographicInformation" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">编制人数</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.preparedPeopleNumber" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">实有人数</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.realPeopleNumber" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">成立日期</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.establishedDate" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">上级同类机构</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.superiorSimilarMechanism" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">隶属类别</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.affiliationType" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">地址</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.address" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">经济类型</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.economicType" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">认领角色</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision.claimCharacter" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           日常监管
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">企业签章</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.enterpriseSignature" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">上级单位/部门</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.superiorMechanismName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">下级单位/部门</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.subordinateDepartment" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">合议主持人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.collegiateHoster" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">合议主持人1</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.collegiateHoster1" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">合议人员</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.collegiatePeople" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">合议记录人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.collegiateRecorder" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">局分管领导</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.bureauChargeLeader" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">局领导</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.bureauLeader" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">总队分管领导</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.generalTeamChargeLeader" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">总队领导</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.generalTeamLeader" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">承办科室负责人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.undertakeKeshiPrincipal" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">承办部门分管负责人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.undertakeDepartmentChargePrincipal" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">承办部门负责人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.undertakeDepartmentPrincipal" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">案件受理编号格式</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.caseAcceptNumberFormat" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">案件文号格式</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.caseDocumentNumberFormat" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">案件集体讨论主持人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.caseDiscussHoster" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">法制科</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.legalSystemDepartment" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">法规处</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.regulationDepartment" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">组织级别（省、市、县）</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.departmentLevel" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">陈述申辩地点</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.statementDefendLocation" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">机构联系人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.institutionalContact" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">收款人全称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.payeeFullname" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">开户银行</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.accountOpeningBank" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">银行地址</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.bankAddress" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">法制办联系电话</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.legalOfficePhone" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">法制科联系电话</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.legalDepartmentPhone" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">陈述申辩联系人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.statementDefender" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">陈述申辩联系电话</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.statementDefenderPhone" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">基本情况</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.basicSituation" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">部门分管负责人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.departmentChargePrincipal" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">部门审理人员</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.departmentTrialer" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">部门负责人</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.departmentPrincipal" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">组织机构名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.dailySupervision2.organizationMechanismName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           核心信息
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理扩展
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           案件办理扩展
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           登记许可
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">处室编码</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.registrationPermit.officeNumber" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           组织机构属性扩展
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">微信号</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.organizationProExpansion.weixin" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">签章名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.organizationProExpansion.signatureName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.organizationProExpansion.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">证书名称</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.organizationProExpansion.certificateName" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">是否是局领导</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-switch v-model="extendedInformation2.organizationProExpansion.isBureauLeader" active-text="是" inactive-text="否" :disabled="readOnly"></el-switch>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           行政执法
                        </td>
                        <td></td>
                     </tr>
                     <tr class="title">
                        <td>
                           食品抽检
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.foodSampling.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">监管范围</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.foodSampling.supervisingRange" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                     <tr class="title">
                        <td>
                           食品抽检
                        </td>
                        <td></td>
                     </tr>
                     <tr>
                        <td class="right"><span class="item">行政区划</span></td>
                        <td :class="{'read-only': readOnly}">
                        <el-input class="small text" v-model="extendedInformation2.foodSampling2.administrativeDivision" v-bind:readonly="readOnly"></el-input>
                        </td>
                     </tr>
                  </table>
               </el-tab-pane>
            </el-tabs>
         </div>
      </div>
   </div>
</template>
<script>
import Vue from 'vue'
import Mock from 'mockjs'
import VueElementExtends from 'vue-element-extends'
import 'vue-element-extends/lib/index.css'
import $ from 'jquery'
import { getScrollingCon } from '@/util/common'

Vue.use(VueElementExtends)
export default {
    data() {
         return {
            role: [
               {
                  label: '可以',
                  key: 1
               },
               {
                  label: '可以2',
                  key: 2
               },
               {
                  label: '可以3',
                  key: 3
               },
            ],//穿梭框的数据
            value: [],//右侧穿梭框的数据

            readOnly: true,//控制编辑和展示，点击编辑按钮更改此项
            editButton: '编辑',//右上角按钮的文字，切换“编辑”和“保存”
            search: '',//搜索框的文字
            tempBasicInfo: '',//基本信息
            tempEmployeeInfo: '',//角色信息，暂时不可用
            tempCommunication: '',//通讯信息，暂时不可用
            menuVisible: false,//右键菜单可见

            department: [{
               id: 1,
               label: '我的部门',
               children: []
            }],//左侧部门树，id用来默认展开，label是显示的文字
            currentTreeNode: null,
            activeName: 'basicInfo', //标签切换

            /*基本信息的字段 */
            basicInfo: {
               basicInfo: {
                  type: '员工',
                  departmentId: '999901010201',
                  name: '通讯录管理员',
                  principal: '张三',
                  organizationStructureType: '人力资源',
                  departmentName: '我的部门',
                  unitName: '我的单位'
               },
               systemAccount: {
                  systemAccount: '',
                  userState: true,
                  admin: false
               },
               userStrategy: {
                  maxSession: 1,
                  ipStrategy: false
               },
               organizationPermission: [{
                  organizationId: 1,
                  organizationType: '部门',
                  organizationMechanism: '监管所',
                  default: '是',
                  activeTime: '2010/07/21',
                  expiredTime: '2010/07/21'
               }]
            },
            /*角色信息的字段 */
            personInfo: [
               {
                  index: 1,
                  personName: '张三'
               },
               {
                  index: 2,
                  personName: '李四'
               },
            ],
            /*员工信息的字段 */
            employeeInfo: {
               employeeInfo: {
                  employeeName: '员工01aaa',
                  employeeState: '在职',
                  employeeId: '123',
                  employeeImg: ''
               },
               basicInfo: {
                  employeeSex: '男',
                  employeePostion: '清洁工',
                  employeeBirthday: '1999/01/23',
                  employeeIdentity: '370123',
                  marriage: '已婚',
                  politicalStatus: '中共党员',
                  CYLDate: '2011/01/23',
                  CPCDate: '2018/01/23',
                  isUnionMember: true,
                  education: '本科',
                  bachelorOfScience: '工学学士',
                  healthState: '良好',
                  height: 183,
                  weight: 80
               },
               employeeSpecialty: {
                  techSkill: '协调',
                  employeeSkill: '篮球',
                  businessSkill: '交谈'
               },
               home: {
                  postalCode: '250000',
                  address: '山东省济南市历下区路',
                  currentAddress: '山东省济南市历下区路',
                  accountLocationName: '山东省济南市',
                  accountLocationPostalCode: '250000',
                  remark: ''
               },
            },
            /*通讯信息的字段 */
            communication: {
               communication: {
                  mobile: '1398979139',
                  telephone: '0531-83666666',
                  fax: '0531-83666666',
                  email: 'zongyi-s@inspur.com',
                  postalCode: '250200',
                  officeAddress: '山东省济南市历下区路',
                  RTX: '2222',
                  MSN: '8888',
                  QQ: '2603895210',
                  weibo: '旋风小子',
                  blog: '旋风小子',
                  website: 'http://www.inspur.com',
                  otherCom: '',
                  remark: ''
               }
            },
            //人员扩展信息
            extendedInformation: {
               creditManagement: {
                  organization: '组织',
               },
               creditManagement2: {
                  administrativeDivision: '区划',
               },
               safetySupervision: {
                  supervisingArea: '经十路',
                  administrativeDivision: '区划',
                  testFile: '123.test',
                  lawEnforcementSupervision: ''
               },
               complaints: {
                  complaintsQuery: '查询'
               },
               dataCenter: {
                  enterpriseType: '国企',
                  operationPermission: '查询',
                  queryArea: '济南市'
               },
               dailySupervision: {
                  supervisingRange: '范围',
                  isLawEnforcement: false,
                  checkingTableTemplatePermission: '查询',
                  regulatoryEnforcementNumber: '100000',
                  nationality: '汉族',
                  educationalLevel: '本科',
                  position: '职务',
                  joinDate: '2018/01/23',
                  claimCharacter: '角色'
               },
               coreInfo: {},
               caseHandling: {
                  basicSituation: '一切正常',
                  signature: '张三',
                  lawEnforcementArea: '经十路',
                  lawEnforcementType: '执法'
               },
               caseHandlingExpansion: {
                  nextLinkHandlerSell: '张三',
                  nextLinkHandlerCanteen: '李四',
                  nextLinkHandlerFood: '王五',
               },
               organizationProExpansion: {
                  weixin: 'innn_2013',
                  signatureName: '名称',
                  administrativeDivision: '',
                  certificateName: '驾驶证'
               },
               foodSampling: {
                  administrativeDivision: '济南',
                  supervisingRange: '范围'
               },
               foodSampling2: {
                  administrativeDivision: '济南',
                  taskTrackingPrmissionRole: '查看本人权限'
               }
            },
            //组织扩展信息
            extendedInformation2: {
               safetySupervision: {
                  organizationSelect: '选择',
                  supervisingArea: '山东',
                  administrativeDivision: '济南',
                  superiorMechanismName: '济南市政府',
                  peopleGovernmentName: '济南市政府',
                  peopleCourt: '济南市人民法院',
                  peopleCourt1: '济南市人民法院',
                  bankAccount: '6228270442225555',
                  bank: '中国农业银行',
                  caseHandlingAgencyCode: '0001001',
                  punishmentDocumentNumber: '000103',
                  administrativeAreaCode: '000102'
               },
               complaints: {
                  subordinateDepartment: '济南市食药监局',
                  complaintsSupervisingArea: '经十路',
                  complaintsNumberingFormat: 'yyyy-MM-dd',
                  complaintsQuery: ''
               },
               dailySupervision: {
                  supervisingRange: '经十路',
                  isLawEnforcement: true,
                  checkingTableTemplatePermission: '查询',
                  regulatoryEnforcementNumber: '000101',
                  industry: '工业',
                  geographicInformation: '地理信息',
                  preparedPeopleNumber: 20,
                  realPeopleNumber: 10,
                  establishedDate: '2018-8-6',
                  superiorSimilarMechanism: '淄博市政府',
                  affiliationType: '类别',
                  address: '路1036号',
                  economicType: '经济类型',
                  claimCharacter: '认领角色'
               },
               dailySupervision2: {
                  enterpriseSignature: '签章',
                  superiorMechanismName: '山东省政府',
                  subordinateDepartment: '济南市食药监局',
                  collegiateHoster: '小么哥',
                  collegiateHoster1: '小么哥',
                  collegiatePeople: '张三',
                  collegiateRecorder: '李四',
                  bureauChargeLeader: '王五',
                  bureauLeader: '王五',
                  generalTeamChargeLeader: '赵四',
                  generalTeamLeader: '赵四',
                  undertakeKeshiPrincipal: '刘能',
                  undertakeDepartmentChargePrincipal: '刘能',
                  undertakeDepartmentPrincipal: '刘能',
                  caseAcceptNumberFormat: '案件受理编号格式',
                  caseDocumentNumberFormat: '案件文号格式',
                  caseDiscussHoster: '案件集体讨论负责人',
                  legalSystemDepartment: '法制科',
                  regulationDepartment: '法规处',
                  departmentLevel: '山东省济南市章丘区',
                  statementDefendLocation: '地点',
                  institutionalContact: '张三',
                  payeeFullname: '张三丰',
                  accountOpeningBank: '中国农业银行',
                  bankAddress: '济南市经十路',
                  legalOfficePhone: '0531-83666666',
                  legalDepartmentPhone: '0531-83666666',
                  statementDefender: '谢广坤',
                  statementDefenderPhone: '1398979139',
                  basicSituation: '一切正常',
                  departmentChargePrincipal: '刘能',
                  departmentTrialer: '刘能',
                  departmentPrincipal: '刘能',
                  organizationMechanismName: '机构名称'
               },
               coreInfo: {},
               caseHandling: {},
               caseHandling2: {},
               caseHandlingExpansion: {},
               caseHandlingExpansion2: {},
               registrationPermit: {
                  officeNumber: '200000'
               },
               organizationProExpansion: {
                  weixin: 'innn_2014',
                  signatureName: '签章名称',
                  administrativeDivision: '济南',
                  certificateName: '证书名称',
                  isBureauLeader: true,
               },
               lawEnforcement: {},
               foodSampling: {
                  administrativeDivision: '济南',
                  supervisingRange: '监管范围'
               },
               foodSampling2: {
                  administrativeDivision: '济南'
               }
            },
            /*婚姻状态选项下拉框的信息 */
            marriage: [
               {
                  value: '已婚',
                  label: '已婚'
               },
               {
                  value: '未婚',
                  label: '未婚'
               },
               {
                  value: '离异',
                  label: '离异'
               }
            ]
         }
      },
      methods: {
      getScrollingCon,
      //加载部门树数据
      loadDepartment() {
         var data = Mock.mock({
            'children|1-12': [{
               label: '@province',
               'id|+1': '@integer(0, 1000)',
               'children|1-12': [{
                  label: '@city',
                  'id|+1': '@integer(0, 1000)',
                  'children|1-12': [{
                     label: '@county',
                     'id|+1': '@integer(0, 1000)',
                  }]
               }]
            }]
         })
         this.department[0].children = data.children
      },
      //编辑信息模式
      edit(){
         if(this.readOnly == true){
            this.readOnly = false
            this.$message('当前可以编辑')
            this.editButton = '保存'
         }else{
            this.readOnly = true
            this.$message({
               message: '已保存',
               type: 'success'
            })
            this.editButton = '编辑'
            this.tempBasicInfo = JSON.stringify(this.basicInfo)
         }
      },
      //取消编辑信息模式
      cancelEdit(){
         this.readOnly = true
         this.editButton = '编辑'
         this.basicInfo = JSON.parse(this.tempBasicInfo)
         /*由于本页面所有的input使用的是v-model，所以事先将更改之前的数据保存一份。点击取消按钮即可将数据还原。 */
         this.$message('已取消')
      },
      //右键菜单
      showRightMenu(MouseEvent, object, Node, element) { // 鼠标右击触发事件
         this.currentTreeNode = object.id // 在树节点右键可以记录下当前要操作的树节点
        this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('#menu')
        menu.style.left = MouseEvent.clientX+'px'//
        menu.style.top = MouseEvent.clientY+'px'
        document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      },
      foo() { // 取消鼠标监听事件 菜单栏
        this.menuVisible = false
        document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      },
      //右键菜单，添加同级
      addSameLevel(){
         console.log('添加了同级，当前节点的主键是'+this.currentTreeNode)
      },
      //右键菜单，添加下级
      addSubordinate(){
         console.log('添加了下级，当前节点的主键是'+this.currentTreeNode)
      },
      //右键菜单，删除
      deleteLevel(){
         console.log('删除，当前节点的主键是'+this.currentTreeNode)
      },
      //树过滤
      filterNode(value, data, node){
         if (!value){
            return true
         }
         // return data.label.indexOf(value) !== -1
         let level = node.level
         let _array = []//这里使用数组存储 只是为了存储值。
         this.getReturnNode(node,_array,value)
         let result = false
         _array.forEach((item)=>{
            result = result || item;
         })
         return result
      },
      getReturnNode(node,_array,value){
         let isPass = node.data &&  node.data.label && node.data.label.indexOf(value) !== -1
         console.log(node.data)
         isPass?_array.push(isPass):''
         this.index++
         if(!isPass && node.level!=1 && node.parent){
            this.getReturnNode(node.parent,_array,value)
         }
      },
      //搜索框更改触发树过滤
      filterChange(){
         this.$refs.depTree.filter(this.search)
      }
   },
   created() {
      //每当页面一进入就加载数据，并将数据另存一份
      this.loadDepartment()
      this.tempBasicInfo = JSON.stringify(this.basicInfo)
   },
   mounted(){
      //使用jQuery为表格第一列添加右对齐的样式
      $(()=>{
         $("table td:nth-child(2n+1)").css("text-align","right")
      })
   },
   computed: {
      _tagplus(){
         return this.$store.state.tagTheme
      }
   }
}
</script>
<style scoped>
.personinfo-container {
    display: flex;
    height: 100%;
}
.department-container {
    width: 25%;
    overflow-y: scroll;
    height: 80vh;
}
.info-container {
    width: 73%;
    overflow: auto;
    margin-left: 2%;
}
.info-container >>> .el-tabs--border-card {
   box-shadow: none;
}
>>> .el-tabs--border-card>.el-tabs__content {
   height: calc(80vh - 100px);
   overflow-y: auto;
}
.small{
   width: 240px;
}
.title{
   color: #409EFF;
   font-weight: bold;
   height: 40px;
   font-size: 20px;
}
span.item{
   color: gray;
}
table.basic-info{
   width: 100%;
}
table.basic-info tr{
   height: 36px;
}
table.organization{
   width: 100%;
   border-collapse: collapse;
}
.organization table, .organization tr, .organization td{
   border: 1px solid gray;
}
.organization td{
   padding: 5px;
}
.right{
   word-break: keep-all;
}
/*右键菜单样式*/
.menu {
   height: 77px;
   width: 127px;
   position: fixed;/*必须是固定的*/
   border: 1px solid #ccc;
   background-color: #fff;
   z-index: 15;
   box-shadow: 0px 0px 7px #aaa;
}
.menu-item {
   display: block;
   line-height: 26px;
   font-size: 12px;
   padding-left: 5px;
}
li:hover {
   background-color: #409eff;
   color: white;
   cursor: default;
   transition: all 0.1s ease
}
</style>
<style>
/*只读状态下的input样式，使输入框看起来像普通文字*/
.read-only input.el-input__inner, .read-only textarea{
   border: none;
   font-size: 16px;
   color: black;
   margin-left: 0;
   font-family: '微软雅黑'
}
.read-only .el-radio__input.is-disabled+span.el-radio__label{
   color: black;
}
.el-switch, .el-radio, .el-date-editor, .el-button.person-right{
   margin-left: 20px;
}
/*为左侧树的鼠标指向伪类添加过渡动画*/
.el-tree-node:focus>.el-tree-node__content {
   transition: all 0.5s ease;
}
.el-tree-node>.el-tree-node__content{
   transition: all 0.5s ease;
}
.personinfo-container input.el-input__inner, .personinfo-container textarea{
   margin-left: 20px;
}
input#search{
   margin-left: 0;
}
.el-date-editor input.el-input__inner{
   margin-left: 0;
}
.el-input.is-disabled .el-input__inner{
   background-color: #fff;
   border: none;
   color: black;
   cursor: auto;
}
.el-select .el-input.is-disabled .el-input__inner{
   cursor: auto;
}
.el-input.is-disabled .el-input__icon{
   cursor: auto;
}
div.el-transfer.role-transfer{
   width: 600px;
   margin: 0 auto;
}
.el-tab-pane{
   overflow-x: auto;
}
</style>